<template>
	<view class="container">
		<view class="list-cell b-b m-t" @click="toggleMask('show')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">发票类型</text>
			<text class="cell-tip">{{current===0?'选择发票':current==1?'电子发票':'纸质发票'}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="toggleMask2('show')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">抬头选择</text>
			<text class="cell-tip">{{company}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell m-t b-b" @click="toggleMask3('show')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">发票内容</text>
			<text class="cell-tip">商品明细</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<!-- <view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">本次交易不需要发票，继续交易</text>
			<text class="cell-more yticon icon-you"></text>
		</view> -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="cancle-title">
					<view class="info">
						<text class="">发票类型选择</text>
						<image src="../../../static/useCenter/delete-img.png" mode="widthFix" @click="toggleMask"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" >
					<view>
						<radio-group @change="radioChange">
							<view class="yt-list">
								<label class="yt-list-cell" v-for="(item, index) in items" :key="item.value" @click="clickItemTab(item.value)">
									<view class="cell-tit ">
										<view class="font34">{{item.name}}</view>
										<view class="font24 color999">{{item.info}}</view>
									</view>
						
									<view>
										<radio :value="item.value" color="#FF5E00" :checked="index === current" />
									</view>
								</label>
							</view>
							<!-- <view class="yt-list">
								<label class="yt-list-cell" >
									<view class="cell-tit ">
										<view class="font34">电子发票</view>
										<view class="font24 color999">目前平台仅支持由商家开具纸质发票，为避免不必要的纠纷建议提前与商家确认发票。</view>
									</view>
									
									<view>
										<radio color="#FF5E00" :checked="true" />
									</view>
								</label>
							</view> -->
						</radio-group>
					</view>
				</scroll-view>
				
			</view>
		</view>
		<view class="mask" :class="billing===0 ? 'none' : billing===1 ? 'show' : ''" @click="toggleMask2">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="cancle-title">
					<view class="info">
						<text class="">发票抬头选择</text>
						<image src="../../../static/useCenter/delete-img.png" mode="widthFix" @click="toggleMask2"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="marginTop40" style="min-height: 400rpx;">
					<view class="list b-b" v-for="(item, index) in billingList" :key="index" @click="clickItem(index)">
						<view class="wrapper">
							<view class="address-box">
								<text v-if="item.isDefault=='true'||item.isDefault==true" class="tag">默认</text>
								<text class="address">{{item.vbrk}}</text>
							</view>
							<view class="u-box">
								<text class="name">{{item.vbrkType==1?"个人":"企业"}}</text>
								<image class="yticon" src="../../../static/useCenter/address/edit.png" mode="widthFix" @click.stop="editInfo('edit', item)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="sure-cancle" @click="addBill('add')">
					新增发票抬头
				</view>
			</view>
		</view>
		<view class="mask" :class="billingContent===0 ? 'none' : billingContent===1 ? 'show' : ''" @click="toggleMask3">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view class="cancle-title">
					<view class="info">
						<text class="">发票内容说明</text>
						<image src="../../../static/useCenter/delete-img.png" mode="widthFix" @click="toggleMask3"></image>
					</view>
				</view>
				<view class="marginTop40">
					<view class="content-info">
						发票内容将显示详细商品名称与价格信息。
					</view>
					<view class="content-info">
						部分商家可能开具发票内容为商品所属类别及价格
						信息，如有特殊需求，请向商家客服咨询。。
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="image" type="center" :custom="true">
			<view class="uni-image">
				<image class="image" :src="popImage" mode="" style="width: 80rpx;height: 80rpx;"/>
				<view class="font34 colorfont">
					{{showToastTips}}
				</view>
			</view>
		</uni-popup>
		<button class="add-btn" @click="submit">完成</button>
	</view>

</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				maskState: 0,
				billing: 0, //发票抬头
				billingContent: 0,
				current: 0,
				showToastTips:'',
				popImage:'',
				billingList: [{
					vbrkType:1,
					vbrk:'朱院章看看',
					taxNumber:'111111',
					bankName :'',
					bankAccount:'',
					companyAddress:'江西省南昌市泰豪',
					companyTel :'15180365758',
					isDefault :true,
					type:2
				}, {
					vbrkType:2,
					vbrk:'优服科技',
					taxNumber:'111111',
					bankName :'',
					bankAccount:'',
					companyAddress:'江西省南昌市泰豪',
					companyTel :'15180365758',
					isDefault :false,
					type:2
				}],
				items: [{
					name: '纸质发票',
					info: '目前平台仅支持由商家开具纸质发票，为避免不必要的纠纷建议提前与商家确认发票。',
					value: 2
				}, {
					name: '电子发票',
					info: '目前平台仅支持由商家开具纸质发票，为避免不必要的纠纷建议提前与商家确认发票。',
					value: 1
				}],
				company:'请选择抬头',
				invoiceId:'',
			};
		},
		onShow(){
			let that = this;
			that.$http
				.request({
					method: 'GET', // 请求方法必须大写
					url: that.$requestApi.invoiceAll+'/1/10',
					data: {}
				})
				.then(result => {
					let _data = result.data;
					console.log(_data)
					if (_data.code === 200) {
						that.billingList = _data.result.dataList
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		methods: {
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			toggleMask2(type) {
				let timer = type === 'show' ? 10 : 300;
				let billing = type === 'show' ? 1 : 0;
				this.billing = 2;
				setTimeout(() => {
					this.billing = billing;
				}, timer)
			},
			toggleMask3(type) {
				let timer = type === 'show' ? 10 : 300;
				let billingContent = type === 'show' ? 1 : 0;
				this.billingContent = 2;
				setTimeout(() => {
					this.billingContent = billingContent;
				}, timer)
			},
			addBill(type) {
				this.billing = 0;
				this.$Router.push({
					name: 'addBill',
					params:{type:type,id:this.current}
				})
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === Number(evt.target.value) ) {
						this.current = this.items[i].value
						break;
					}
				}
				
			},
			clickItemTab(value){
				this.maskState = 0;
				this.current =  value
			},
			clickItem(type){
				let item = this.billingList[type];
				this.company = `${item.vbrkType=='1' ? '个人': '企业'}` +'-'+ item.vbrk ;
				this.invoiceId = item.invoiceId
				this.toggleMask2();
			},
			editInfo(type,item){
				this.$Router.push({
					name: 'addBill',
					params:{type:type,data:JSON.stringify(item),id:this.current}
				})
			},
			submit(){
				console.log(this.current)
				if (this.current==0) {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请选择发票'
					return;
				}
				if (this.invoiceId=='') {
					this.popImage = '/static/useCenter/error.png';
					this.$refs['image'].open();
					this.showToastTips='请选择抬头'
					return;
				}
				this.$api.prePage().invoiceName = this.company;
				this.$api.prePage().invoiceId = this.invoiceId;
				this.$Router.back(1)
			},
			stopPrevent(){}
		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 30upx 30upx;
		background: #fff;
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}



	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: #fff;
			margin-right: 10upx;
			background: $base-color2;
			border-radius: 8upx;
			width: 66upx;
			height: 36upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 6upx;

		}

		.address {
			font-size: 30upx;
			color: $font-color-dark;
			max-width: 460upx;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.name {
			margin-right: 30upx;
		}

		.yticon {
			width: 34upx;
			height: auto;
			position: absolute;
			right: 0;
		}
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		border-radius: 49upx;
		background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		box-shadow: 0upx 10upx 30upx rgba(255, 68, 0, 0.2);
	}

	.yt-list {
		margin-top: 40upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 30upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}


		.title {
			font-size: 26upx;
			color: #0B0E11;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #0B0E11;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-8e8;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		.store {
			width: 150upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			font-size: 24upx;
			color: #fff;
			border-radius: 4upx;
			background-color: #FF5E00;
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.pay-price {
			font-size: 34upx;
			color: #FE2130;
		}
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 40vh;
			max-height: 60vh;
			background: #fff;
			transform: translateY(100%);
			transition: .3s;
			
			border-radius: 30upx 30upx 0 0;
			padding: 60upx 0 0 0;

			.content-info {
				font-size: 28rpx;
				color: #0B0E11;
				position: relative;
				padding: 0 50rpx;
				margin-bottom: 30upx;

				&::after {
					content: '';
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					background-color: #FF5E00;
					position: absolute;
					left: 30upx;
					top: 14rpx;
				}
			}

			.sure-cancle {
				width: 690upx;
				margin: 40upx auto;
				background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
				text-align: center;
				height: 70upx;
				line-height: 70upx;
				border-radius: 40upx;
				font-size: 40upx;
				color: #fff;
			}

			.cancle-title {
				position: relative;
				padding: 0 30upx;

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 42upx;
						height: auto;
						margin-right: 10upx;
					}
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		border-radius: 49upx;
		background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		box-shadow: 0upx 10upx 30upx rgba(255, 68, 0, 0.2);
	}
</style>
